import { ProFormSelect } from '@ant-design/pro-components';
import { ProForm, ProFormDatePicker, ProFormDateRangePicker } from '@ant-design/pro-form';
import { Card, message } from 'antd';
import { createStyles } from 'antd-style';
import React from 'react';

/**
 * 加入我们
 * @constructor
 */

const useStyles = createStyles(() => {
  return {
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
      padding: 25,
      backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
      backgroundSize: '100% 100%',
      justifyContent: 'center',
      alignItems: 'center',
    },
    card: {
      width: '40vw',
      height: '90vh',
      backgroundColor: 'rgba(255, 255, 255, 0.6)',
      boxShadow: '1px 0 20px rgba(22,119,255,0.3)',
    },
  };
});

const data = [
  '1. 帮助你制定学习计划，快速学习大学三年的所有专业知识。',
  '2. 由专业老师辅导，学习材料完备，解决学习过程中的难点。',
  '3. 学长学姐获奖经历丰富，分享学习技巧以及就业心得，快速接触企业级内容。',
  '4. 比赛丰富，可根据自己兴趣报名，优先选拔工坊内成员。',
  '5. 完善的培养体系，可在大二独立自主开发企业级主流项目',
  '6. 项目扩展性丰富，接触当前最新最热技术，创造更多可能！',
];

const Join: React.FC = () => {
  const { styles } = useStyles();

  return (
    <div className={styles.container}>
      <Card className={styles.card}>
        {/*<Row gutter={16}>*/}
        {/*<Col span={12}>*/}
        {/*  <Title level={3} style={{ textAlign: 'center' }}>*/}
        {/*    《 致新同学的一封信 》*/}
        {/*  </Title>*/}
        {/*  <Divider />*/}
        {/*  <div*/}
        {/*    style={{*/}
        {/*      fontSize: 20,*/}
        {/*      fontWeight: 'bold',*/}
        {/*      marginTop: 30,*/}
        {/*      textAlign: 'center',*/}
        {/*    }}*/}
        {/*  >*/}
        {/*    <span style={{ color: '#1677FF' }}>*/}
        {/*      <SendOutlined />*/}
        {/*      &nbsp;Hi~ 新同学*/}
        {/*    </span>*/}
        {/*    &nbsp;欢迎你加入灵动创意工坊的大家庭!*/}
        {/*  </div>*/}
        {/*  <div*/}
        {/*    style={{*/}
        {/*      fontSize: 14,*/}
        {/*      marginTop: 10,*/}
        {/*      textAlign: 'center',*/}
        {/*    }}*/}
        {/*  >*/}
        {/*    这里有许许多多热爱技术的同学，大家一起学习，一起备赛，一起创新！*/}
        {/*  </div>*/}
        {/*  <List*/}
        {/*    style={{ width: '80%', margin: '30px auto' }}*/}
        {/*    header={*/}
        {/*      <div style={{ fontWeight: 'bold' }}>*/}
        {/*        <CheckCircleOutlined style={{ color: '#1677FF' }} />*/}
        {/*        &nbsp;&nbsp;在这里，你能收获如下内容 ：*/}
        {/*      </div>*/}
        {/*    }*/}
        {/*    bordered*/}
        {/*    dataSource={data}*/}
        {/*    renderItem={(item) => <List.Item>{item}</List.Item>}*/}
        {/*  />*/}
        {/*  <div*/}
        {/*    style={{*/}
        {/*      fontSize: 14,*/}
        {/*      marginTop: 10,*/}
        {/*      textAlign: 'center',*/}
        {/*    }}*/}
        {/*  >*/}
        {/*    工坊拥有独立学习空间，完善的基础设施，信息化管理系统，一切都已经准备好了*/}
        {/*  </div>*/}
        {/*  <div*/}
        {/*    style={{*/}
        {/*      fontSize: 14,*/}
        {/*      marginTop: 10,*/}
        {/*      textAlign: 'center',*/}
        {/*    }}*/}
        {/*  >*/}
        {/*    填写右边的个人信息，经过选拔后，将成为灵动创意工坊的一员，在这里发挥你的创意*/}
        {/*  </div>*/}
        {/*  <div*/}
        {/*    style={{*/}
        {/*      fontSize: 14,*/}
        {/*      marginTop: 10,*/}
        {/*      textAlign: 'center',*/}
        {/*    }}*/}
        {/*  >*/}
        {/*    期待你能在工坊中有所收获，更希望工坊能给你带来更好的机遇，助你完成你的目标！*/}
        {/*  </div>*/}
        {/*  <div*/}
        {/*    style={{*/}
        {/*      fontSize: 20,*/}
        {/*      fontWeight: 'bold',*/}
        {/*      marginTop: 30,*/}
        {/*      textAlign: 'center',*/}
        {/*    }}*/}
        {/*  >*/}
        {/*    还等什么? 加入我们，一起做点更有意义的事情，*/}
        {/*    <span style={{ color: '#1677FF' }}>在一起，就可以！</span>*/}
        {/*  </div>*/}
        {/*</Col>*/}
        {/*<Col span={12}>*/}
        <ProForm
          onFinish={async () => {
            message.success('提交成功');
          }}
          syncToUrl={(values, type) => {
            if (type === 'get') {
              // 为了配合 transform
              // startTime 和 endTime 拼成 createTimeRanger
              return {
                ...values,
                createTimeRanger:
                  values.startTime || values.endTime
                    ? [values.startTime, values.endTime]
                    : undefined,
              };
            }
            // expirationTime 不同步到 url
            return {
              ...values,
              expirationTime: undefined,
            };
          }}
          initialValues={{
            name: '蚂蚁设计有限公司',
            useMode: 'chapter',
          }}
          autoFocusFirstInput
        >
          <ProFormSelect
            options={[
              {
                value: 'chapter',
                label: '盖章后生效',
              },
            ]}
            width="sm"
            name="useMode"
            label="合同约定生效方式"
          />
          <ProFormDateRangePicker
            transform={(values) => {
              return {
                startTime: values ? values[0] : undefined,
                endTime: values ? values[1] : undefined,
              };
            }}
            width="md"
            name="createTimeRanger"
            label="合同生效时间"
          />
          <ProFormDatePicker width="md" name="expirationTime" label="合同失效时间" />
        </ProForm>
        {/*    </Col>*/}
        {/*  </Row>*/}
      </Card>
    </div>
  );
};

export default Join;
